<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>任务运行记录 - CronGo</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <style>
        .duration {
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1>任务运行记录</h1>
        <div class="card mt-4">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>任务名称</th>
                                <th>开始时间</th>
                                <th>结束时间</th>
                                <th>执行时长</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody id="logList">
                            <!-- 日志内容将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 检查登录状态
        function checkAuth() {
            const token = localStorage.getItem('token');
            if (!token) {
                window.location.href = '/login';
                return;
            }
        }

        // 添加认证头
        function addAuthHeader(xhr) {
            const token = localStorage.getItem('token');
            if (token) {
                xhr.setRequestHeader('Authorization', 'Bearer ' + token);
            }
        }

        // 处理认证错误
        function handleAuthError(xhr) {
            if (xhr.status === 401) {
                localStorage.removeItem('token');
                window.location.href = '/login';
            }
        }

        // 页面加载完成后初始化
        $(document).ready(function() {
            // 检查登录状态
            checkAuth();

            // 设置全局AJAX配置
            $.ajaxSetup({
                beforeSend: function(xhr) {
                    addAuthHeader(xhr);
                },
                error: function(xhr) {
                    handleAuthError(xhr);
                }
            });

            // 获取任务ID
            const urlParams = new URLSearchParams(window.location.search);
            const taskId = urlParams.get('id');

            // 加载日志
            if (taskId) {
                loadTaskLogs(taskId);
            } else {
                loadRecentLogs();
            }
        });

        // 格式化执行时长
        function formatDuration(seconds) {
            if (seconds < 0.1) return "< 0.1秒";
            
            const days = Math.floor(seconds / (24 * 3600));
            seconds %= (24 * 3600);
            const hours = Math.floor(seconds / 3600);
            seconds %= 3600;
            const minutes = Math.floor(seconds / 60);
            seconds %= 60;
            
            let result = [];
            if (days > 0) result.push(days + "天");
            if (hours > 0) result.push(hours + "小时");
            if (minutes > 0) result.push(minutes + "分");
            if (seconds > 0) result.push(seconds.toFixed(1) + "秒");
            
            return result.join(" ");
        }

        // 加载任务日志
        function loadTaskLogs(taskId) {
            // 先清空日志列表并显示加载提示
            $('#logList').html('<tr><td colspan="6" class="text-center">正在加载运行记录...</td></tr>');
            
            $.ajax({
                url: `/api/tasks/${taskId}/task-logs`,
                method: 'GET',
                success: function(logs) {
                    if (!logs || logs.length === 0) {
                        $('#logList').html('<tr><td colspan="6" class="text-center">暂无运行记录</td></tr>');
                        return;
                    }
                    
                    let html = '';
                    logs.forEach(log => {
                        const duration = log.end_time ? 
                            (new Date(log.end_time) - new Date(log.start_time)) / 1000 :
                            null;
                        
                        html += `
                            <tr>
                                <td>${log.id}</td>
                                <td>${log.task_name || '已删除的任务'}</td>
                                <td>${new Date(log.start_time).toLocaleString()}</td>
                                <td>${log.end_time ? new Date(log.end_time).toLocaleString() : '-'}</td>
                                <td class="duration">${duration ? formatDuration(duration) : '-'}</td>
                                <td>
                                    <span class="badge ${log.success ? 'bg-success' : 'bg-danger'}">
                                        ${log.success ? '成功' : '失败'}
                                    </span>
                                </td>
                            </tr>
                        `;
                    });
                    $('#logList').html(html);
                },
                error: function() {
                    $('#logList').html('<tr><td colspan="6" class="text-center text-danger">加载运行记录失败</td></tr>');
                }
            });
        }

        // 加载最近日志
        function loadRecentLogs() {
            // 先清空日志列表并显示加载提示
            $('#logList').html('<tr><td colspan="6" class="text-center">正在加载运行记录...</td></tr>');
            
            $.ajax({
                url: '/api/task-logs',
                method: 'GET',
                success: function(logs) {
                    if (!logs || logs.length === 0) {
                        $('#logList').html('<tr><td colspan="6" class="text-center">暂无运行记录</td></tr>');
                        return;
                    }
                    
                    let html = '';
                    logs.forEach(log => {
                        const duration = log.end_time ? 
                            (new Date(log.end_time) - new Date(log.start_time)) / 1000 :
                            null;
                        
                        html += `
                            <tr>
                                <td>${log.id}</td>
                                <td>${log.task_name || '已删除的任务'}</td>
                                <td>${new Date(log.start_time).toLocaleString()}</td>
                                <td>${log.end_time ? new Date(log.end_time).toLocaleString() : '-'}</td>
                                <td class="duration">${duration ? formatDuration(duration) : '-'}</td>
                                <td>
                                    <span class="badge ${log.success ? 'bg-success' : 'bg-danger'}">
                                        ${log.success ? '成功' : '失败'}
                                    </span>
                                </td>
                            </tr>
                        `;
                    });
                    $('#logList').html(html);
                },
                error: function() {
                    $('#logList').html('<tr><td colspan="6" class="text-center text-danger">加载运行记录失败</td></tr>');
                }
            });
        }
    </script>
</body>
</html> 